.rare-words-input__stroke {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;

  &-left {
    display: flex;
    flex-wrap: wrap;
    flex: 1 1;
    box-sizing: border-box;
  }

  &-operation {
    width: 25%;
  }

  &-key {
    flex: 1 1 33.33%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(96 * var(--px, 1px));
    font-size: calc(32 * var(--px, 1px));
    box-sizing: border-box;
    border: calc(1 * var(--px, 1px)) solid #eee;
    border-bottom: none;
    border-left: none;
    user-select: none;

    &:active {
      &::before {
        opacity: 0.1;
      }
    }

    &:last-child {
      border-right: none;
    }

    &::before {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 100%;
      height: 100%;
      background-color: #000;
      border: inherit;
      border-color: #000;
      border-radius: inherit;
      transform: translate(-50%, -50%);
      opacity: 0;
      content: ' ';
      box-sizing: content-box;
    }

    &.text-btn {
      font-size: calc(28 * var(--px, 1px));
    }

    &.confirm-btn {
      background-color: #1677ff;
      color: #fff;
      border: none;
      margin-left: calc(-1 * var(--px, 1px));
    }
  }
}
